<template>
    <div>
        <h3>需求：自适应高度2</h3>
        <hr>
        模块1高度: <input type="number" v-model.number="m1Height">
        模块2高度:<input type="number" v-model.number="m2Height">
        模块3高度: <input type="number" v-model.number="m3Height">
        <div class="container" v-show="maxHeight != 0">
            <div class="m1" ref="m1" :style="{'height' : maxHeight+'px'}">模块1</div>
            <div class="m2" ref="m2" :style="{'height': maxHeight+'px'}">模块2</div>
            <div class="m3" ref="m3" :style="{'height': maxHeight+'px'}">模块3</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Interview3_2",
        data(){
            return {
                maxHeight : 0,   // 初始最大高度为100
                m1Height : 0,
                m2Height : 0,
                m3Height : 0,
            }
        },
        methods: {
            calculateMaxHeight(){
                this.maxHeight = Math.max(this.m1Height,this.m2Height,this.m3Height)
            }
        },
        watch : {
            m1Height(){
               this.calculateMaxHeight()
            },
            m2Height(){
                this.calculateMaxHeight()
            },
            m3Height(){
                this.calculateMaxHeight()
            }
        }
    }
</script>

<style scoped>
    .container {
        width: 800px;
        height: 400px;
        background: #f0f0f0;
        margin: 50px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container>div {
        border: 3px solid #333;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 28px;
        color: #fff;
        text-align: center;

    }
    .m1 {
        width: 200px;
        background: pink;
        transition: height 1s linear;
    }
    .m2 {
        width: 200px;
        background: deepskyblue;
        transition: height 1s linear;
    }
    .m3 {
        width: 300px;
        background: #007ba5;
        transition: height 1s linear;
    }
</style>